<script setup lang="ts">
import Search from "@/views/layer/area/components/Widgets/Search/index.vue";
import Tool from "@/views/layer/area/components/Widgets/Tool/index.vue";
import Detail from "@/views/layer/area/components/Widgets/Detail/index.vue";
import InfoList from "@/views/layer/area/components/Widgets/InfoList/index.vue";
import Option from "@/views/layer/area/components/Widgets/Option/index.vue";
import { useMapStore } from "@/store";
import { ref } from "vue";
import { useLocalStore } from "@/views/layer/area/store";
import Legend from "@/views/layer/area/components/Widgets/Legend/index.vue";

defineProps({
  deviceCategoryList: Array<any>,
});
const mapStore = useMapStore();
const localStore = useLocalStore();
const radio = ref(true);
const isShowTool = ref(false);
const isShowInfoList = ref(false);
const isShowLegend = ref(false);
const { areaCoordinates } = storeToRefs(mapStore);
const toggleShowLegend = () => {
  isShowLegend.value = !isShowLegend.value;
};
const close = () => {
  mapStore.setAreaCoordinates("");
};
watchEffect(() => {
  localStore.setMarkerClusterFlag(radio.value);
});
</script>

<template>
  <Search :store="localStore" />
  <div class="options">
    <div class="bg-blue" @click="isShowTool = !isShowTool">区域绘制</div>
    <div class="bg-blue" @click="isShowInfoList = !isShowInfoList">
      区域列表
    </div>
    <span class="cluster-tips">聚集显示</span>
    <el-switch
      class="ml-2"
      v-model="radio"
      style="

--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
    />
  </div>
  <Tool v-if="isShowTool" />
  <Detail v-if="areaCoordinates" :coords="areaCoordinates" />
  <InfoList
    v-if="isShowInfoList"
    :setAreaTypeId="mapStore.setAreaTypeId"
    @close="isShowInfoList = !isShowInfoList"
  />
  <Option @toggle-show-legend="toggleShowLegend" />
  <Legend
    v-if="isShowLegend"
    @toggle-show-legend="toggleShowLegend"
    :deviceCategoryList="deviceCategoryList"
  />
</template>

<style scoped lang="scss">
.options {
  position: absolute;
  top: 27px;
  right: 17px;
  z-index: 1000;
  display: flex;
  color: white;
  background: #fff;

  div {
    width: 65px;
    height: 65px;
    margin-left: 25px;
    line-height: 65px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
  }

  .bg-blue {
    font-size: 14px;
    background: #1990ff 100%;
  }

  .cluster-tips {
    margin: 0 0 0 25px;
    font-family: PingFangSC-bold, sans-serif;
    font-size: 20px;
    line-height: 65px;
    color: rgb(0 0 0 / 100%);
    text-align: left;
  }
}
</style>
